<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11_生命周期</title>
</head>

<body>
    <div id="main"></div>

    <!-- 引入react核心库，引入对象：React -->
    <script src="./js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM，引入对象：ReactDOM -->
    <script src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="./js/babel.min.js"></script>
    <!-- 引入对组件属性约束，引入对象：PropTypes -->
    <script src="./js/prop-types.js"></script>

    <script type="text/babel">

        class Box extends React.Component {

            constructor(props) {
                console.log('Box constructor')
                super(props)
                this.state = { count: 0 }
            }

            add = (event) => {
                const { count } = this.state
                // 卸载组件
                this.setState({
                    count: count + 1
                })
            }

            clear = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById('main'))
                // console.log('')
            }

            // 强制更新，不受组件更新开关的影响
            force = () => {
                console.log('Box force update')
                this.forceUpdate()
            }

            // 组件将要挂载
            componentWillMount() {
                console.log('Box will mount')
                // console.log(this.add)
            }

            // 组件挂载后
            componentDidMount() {
                console.log('Box did mount')
            }

            // 组件卸载前
            componentWillUnmount() {

            }

            // 控制组件更新的“开关”，默认返回 true
            shouldComponentUpdate() {
                console.log('Box can update')
                return true
            }

            // 组件更新前
            componentWillUpdate() {
                console.log('Box will update')
            }

            // 组件更新后
            componentDidUpdate() {
                console.log('Box did update')
            }

            render() {
                console.log('Box render')
                const { count } = this.state
                return (
                    <div>
                        <h1>SUM：{count}</h1>
                        <button onClick={this.add}>add</button>
                        <button onClick={this.clear}>卸载组件</button>
                        <button onClick={this.force}>强制更新</button>
                        <Child count={count} />
                    </div>
                )
            }
        }

        class Child extends React.Component {

            // 组件将要接收到“新”属性值时
            componentWillReceiveProps(props) {
                console.log('child receive props', props)
            }

            // 控制组件更新的“开关”，默认返回 true
            shouldComponentUpdate() {
                console.log('child can update')
                return true
            }

            // 组件更新前
            componentWillUpdate() {
                console.log('child will update')
            }

            // 组件更新后
            componentDidUpdate() {
                console.log('child did update')
            }


            render() {
                console.log('child render')
                return (
                    <div>
                        <div>count from parent is : {this.props.count}</div>
                    </div>
                )
            }
        }

        ReactDOM.render(<Box />, document.getElementById('main'))
    </script>
</body>

</html>